window.addEventListener('load', function () {
	var left = document.querySelector('.left');
	var right = document.querySelector('.right');
	var wrap = document.querySelector('.wrap');


	wrap.addEventListener('mouseenter', function () {
		left.style.display = 'block';
		right.style.display = 'block';
		clearInterval(timer);
		timer = null;
	})
	wrap.addEventListener('mouseleave', function () {
		left.style.display = 'none';
		right.style.display = 'none';
		timer = setInterval(function () {
			right.click();
		}, 2000);
	})

	// 动态生成圆点
	var ul = wrap.querySelector('ul');
	var ol = wrap.querySelector('ol');
	var wrapWidth = wrap.offsetWidth;
	for (var i = 0; i < ul.children.length; i++) {
		// 创建节点
		var li = document.createElement('li');
		// 插入节点
		ol.appendChild(li);
		// 设置自定义属性
		li.setAttribute('index', i);
		// 绑定点击事件
		li.addEventListener('mouseover', function () {
			// 排他思想
			for (var i = 0; i < ol.children.length; i++) {
				ol.children[i].className = '';
			}
			this.className = 'on';
			// 点击圆圈移动图片，ul
			//animate(obj,target,callback)
			// 获取轮播区域宽度

			var index = this.getAttribute('index');
			num = index;
			circle = index;
			// console.log(index);
			// 拿到索引号
			// console.log(wrapWidth);
			animate(ul, -index * wrapWidth);
		})

	}
	// 设置当前类名
	ol.children[0].className = 'on';
	// 克隆第一张图片
	var first = ul.children[0].cloneNode(true);
	ul.appendChild(first);
	// 点击右侧按钮，滚动图片
	var num = 0;
	var circle = 0;
	var flag = true;
	right.addEventListener('click', function () {
		if (flag) {
			flag = false;
			// 无缝滚动
			if (num == ol.children.length - 1) {
				ul.style.left = 0;
				num = 0;
			}
			num++;
			animate(ul, -num * wrapWidth, function () {
				flag = true; //打开节流阀
			});
			// 点击按钮使圆圈相应变化
			circle++;
			// 排他思想
			if (circle == ol.children.length) {
				circle = 0;
			}
			circleChange();
		}

	});

	// 左侧按钮
	left.addEventListener('click', function () {
		if (flag) {
			flag = false;
			// 无缝滚动
			if (num == 0) {
				num = ul.children.length - 1;
				ul.style.left = -num * wrapWidth + 'px';
			}
			num--;
			animate(ul, -num * wrapWidth, function () {
				flag = true;
			});
			// 点击按钮使圆圈相应变化
			circle--;
			// 排他思想
			// if (circle < 0) {
			//     circle = ol.children.length - 1;
			// }
			circle = circle < 0 ? ol.children.length - 1 : circle;
			circleChange();
		}

	})

	function circleChange() {
		for (var i = 0; i < ol.children.length; i++) {
			ol.children[i].className = '';
		}
		ol.children[circle].className = 'on';
	}

	// 自动播放
	var timer = setInterval(function () {
		right.click();
	}, 2000);
	// 节流阀，防止轮播过快（回调函数）


})

function animate(obj, target, callback) {
	// console.log(callback);  callback = function() {}  调用的时候 callback()

	// 先清除以前的定时器，只保留当前的一个定时器执行
	clearInterval(obj.timer);
	obj.timer = setInterval(function () {
		// 步长值写到定时器的里面
		// 把我们步长值改为整数 不要出现小数的问题
		// var step = Math.ceil((target - obj.offsetLeft) / 10);
		var step = (target - obj.offsetLeft) / 10;
		step = step > 0 ? Math.ceil(step) : Math.floor(step);
		if (obj.offsetLeft == target) {
			// 停止动画 本质是停止定时器
			clearInterval(obj.timer);
			// 回调函数写到定时器结束里面
			// if (callback) {
			//     // 调用函数
			//     callback();
			// }
			callback && callback();
		}
		// 把每次加1 这个步长值改为一个慢慢变小的值  步长公式：(目标值 - 现在的位置) / 10
		obj.style.left = obj.offsetLeft + step + 'px';

	}, 15);
}